<!-- 工作台页面 -->
<template>
  <FullCalendar class="calendar" :options="calendarOptions" />
  <!-- <div v-for="item in currentEvents" :key="item.id">
    {{ currentEvents }}
    {{ item.title }}
  </div> -->
</template>

<script lang="ts" setup>
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import dayjs from 'dayjs';

// import Footer from '@/components/footer/index.vue';
// import LoginBanner from './components/banner.vue';
// import LoginForm from './components/login-form.vue';

let current = ref();
// 点击选择日历
const handleDateSelect = (selectInfo: any) => {
  console.log('handleDateSelect', selectInfo);
  console.log('handleDateSelect111', selectInfo.view.calendar);

  let title = prompt('Please enter a new title for your event');
  let calendarApi = selectInfo.view.calendar;

  calendarApi.unselect(); // clear date selection

  if (title) {
    calendarApi.addEvent({
      id: '111',
      title,
      start: selectInfo.startStr,
      end: selectInfo.endStr,
      allDay: selectInfo.allDay
    });
  }
};

const handleEventClick = (clickInfo) => {
  console.log('handleEventClick', clickInfo);
  if (
    confirm(
      `Are you sure you want to delete the event '${clickInfo.event.title}'`
    )
  ) {
    clickInfo.event.remove();
  }
};

const handleEvents = (events) => {
  console.log('handleEvents', events);
  currentEvents.value = events;
  console.log('handleEvents', currentEvents.value);
};

let currentEvents = ref([]);
let eventGuid: 0;
const createEventId = () => {
  return String(eventGuid++);
};

const calendarOptions = reactive({
  allDayText: '全天',
  buttonText: {
    today: '今天',
    month: '月视图',
    week: '周视图',
    day: '天视图',
    list: '列表'
  },
  locale: 'zh-cn',
  weekMode: 'variable',
  plugins: [
    dayGridPlugin,
    timeGridPlugin,
    interactionPlugin // needed for dateClick
  ],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  initialView: 'dayGridMonth',
  initialEvents: [
    {
      id: createEventId(),
      title: 'All-day event',
      // start: new Date().toISOString().replace(/T.*$/, '') + 'T12:00:00'
      start: dayjs().format('YYYY-MM-DD')
    },
    {
      id: createEventId(),
      title: 'Timed event',
      start: '2023-05-21',
      display: 'background'
    }
  ], // alternatively, use the `events` setting to fetch from a feed
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  weekends: true,
  select: handleDateSelect,
  eventClick: handleEventClick,
  eventsSet: handleEvents,
  themeSystem: 'bootstrap5'
});
</script>

<style lang="less" scoped>
.calendar {
  width: 100%;
  height: 100%;
}
</style>
